var stats = new Stats(),
    c = document.getElementById('c'),
    input = document.getElementById('lineLength'),
    ctx = c.getContext('2d');
window.addEventListener('resize', handleWindowResize, false);
function handleWindowResize () {
    c.width = window.innerWidth * window.devicePixelRatio;
    c.height = window.innerHeight * window.devicePixelRatio;
}
handleWindowResize();

//全局变量
var pendulumRadius = 20, //圆形钟摆半径
    fixedPoiner = new Vector(-300, 0),
    GRAVITY_FORCE = 9.81, //重力加速度
    PLATFORM_WIDTH_IN_METER = 10, //将canvas的宽看做10米
    pixelsPerMeter = c.width / PLATFORM_WIDTH_IN_METER, //每米像素数
    initAngle = degToRad(90), //初始角度
    lineLength = 1, //绳长 单位：米
    fps, //帧动画率
    frameAnimationId; //帧动画Id

//绘制函数
function drawPendulum (sprite, ctx) {
    ctx.save();
    ctx.fillStyle = 'rgb(100, 100, 195)';
    ctx.beginPath();
    ctx.arc(sprite.x, sprite.y, pendulumRadius, 0, Math.PI * 2, false);
    ctx.closePath();
    ctx.fill();
    ctx.restore();
    ctx.save();
}

//绘制器
var drawPendulumPainer = new Sprite.StrokeAndFillPainter(drawPendulum);

//精灵
var pendulum = new Sprite('pendulum', drawPendulumPainer);

//摆动行为函数
/**
 * 摆动角度与时间的关系函数
 *  θ = θ0 * cos( Math.sqrt(g / l) * t)
 * 其中:
 *       θ0：初始角度
 *       g：自然重力加速度
 *       l：摆线长度
 *       t：时长
 */
function swingBehaivor (sprite, behaivor, ctx) {
    var time = swingTimer.getElapsedTime() / 1000;
    var curAngle = initAngle * Math.cos( Math.sqrt(GRAVITY_FORCE / lineLength) * time );
    pendulum.set({
        x: Math.cos(curAngle) * lineLength * pixelsPerMeter + fixedPoiner.x,
        y: Math.sin(curAngle) * lineLength * pixelsPerMeter + fixedPoiner.y
    });
}

//添加摆动行为
pendulum.addBehavior(swingBehaivor, {});

pendulum.set({
    x: Math.cos(initAngle) * lineLength * pixelsPerMeter + fixedPoiner.x,
    y: Math.sin(initAngle) * lineLength * pixelsPerMeter + fixedPoiner.y
});

var swingTimer = new Sprite.AnimationTimer();

function drawBackgrund (ctx) {
    ctx.save();
    ctx.fillStyle = 'white';
    ctx.fillRect(-c.width, -c.height / 2, c.width, c.height);
    ctx.restore();
}

function darwFixedPoint (ctx) {
    ctx.save();
    ctx.fillStyle = 'black';
    ctx.beginPath();
    ctx.arc(fixedPoiner.x, fixedPoiner.y, 5, 0, Math.PI * 2, false);
    ctx.closePath();
    ctx.fill();
    ctx.restore();
}
 
function drawLine (ctx) {
    ctx.beginPath();
    ctx.lineWidth = 1;
    ctx.moveTo(fixedPoiner.x, fixedPoiner.y);
    ctx.lineTo(pendulum.x, pendulum.y);
    ctx.closePath();
    ctx.stroke();
}

function degToRad (deg) {
    return Math.PI / 180 * deg;
}

function radToDeg(rad) {
    return 180 / Math.PI * rad;
}

swingTimer.start();
ctx.translate(c.width / 2, c.height / 2);
ctx.rotate(degToRad(90));
(function loop(time) {
    drawBackgrund(ctx);
    darwFixedPoint(ctx);
    drawLine(ctx);
    frameAnimationId = requestAnimationFrame(loop);
    var tempFps = stats.update();
    fps = tempFps === 0 ? 60 : tempFps;

    pendulum.paint(ctx);
    pendulum.update(ctx, time);

})();